<script setup>
import {useCartStore} from '@/stores/cart';
import { watch } from 'vue';
const cartStore = useCartStore();
const {item} = defineProps(['item']);
const goodsCount = ref(item.goodsCount);
watch(goodsCount,(newGoodsCount)=>{
    cartStore.updateCartList(item.cartItemId,newGoodsCount);
});
</script>
<template>
<div class="cart-item">
    <van-image :src="addUrlPrefix(item.goodsCoverImg)"/>
    <div class="product-info">
        <h3 class="name">{{item.goodsName}}</h3>
        <p class="info">
            <span>¥{{item.sellingPrice}}</span>
            <van-stepper 
            min="1" max="5" integer 
            v-model="goodsCount"/>
        </p>
    </div>
</div>
</template>
<style lang="less">
.cart-item{
    display: flex;
    justify-content: center;
    align-items: center;
    .van-image{
        width:100px;
        height:100px;
    }
    .product-info{
        display: flex;
        flex-direction: column;
        height:80px;
        justify-content: space-evenly;
        .name{
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            max-width: 180px;
        }
        .info{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    }
}
</style>